<script setup lang="ts">
import PieChart from './pie-chart.vue'
import BarChart from './bar-chart.vue'
import SankeyChart from './sankey-chart.vue'

const props = defineProps<{
  info: any
}>()

const tanpanchaStore = useTanpanchaStore()

const unit = computed(() => {
  return tanpanchaStore.panchaUnit
})

const summary = computed(() => {
  const info = props.info
  return {
    carbonInventoryId: info.carbonInventoryId,
    totalCarbonEmission: info.totalCarbonEmission,
    carbonEmission: info.carbonEmission,
    emissionReduction: info.emissionReduction,
    lastTotalCarbonEmission: info.lastTotalCarbonEmission,
    yoy: info.yoy,
  }
})

const analyseList = computed(() => {
  const info = props.info
  return info.analyseList ?? []
})

const facilityActivityList = computed(() => {
  const info = props.info
  return info.facilityActivityList ?? []
})

const diversionDiagramList = computed(() => {
  const info = props.info
  return info.diversionDiagramList ?? []
})

const pieList = computed(() => {
  return unref(analyseList).map((item: any) => ({
    a: item.name,
    b: item.value,
    c: item.percent,
  }))
})
</script>

<template>
  <div class="overflow-auto pb-4">
    <div class="h-34 w-full flex gap-4 px-4">
      <div class="alpha-block h-full w-1/2 flex flex-col">
        <div class="p-3">
          碳排放量
        </div>
        <div class="fs-14 flex items-center p-3">
          <span class="fs-20">{{ summary.totalCarbonEmission ?? '-' }}</span>
          <div class="ml-auto flex items-center">
            <span>去年：</span>
            <span>{{ summary.lastTotalCarbonEmission ?? '-' }}</span>
            <span class="fs-12 ml-1 opacity-80">{{ unit }}</span>
          </div>
        </div>
        <div class="fs-14 flex items-center px-3">
          <span>{{ unit }}</span>
          <div class="ml-auto flex items-center">
            <span>同比：</span>
            <span>{{ summary.yoy ?? '-' }}%</span>
          </div>
        </div>
      </div>
      <div class="h-full w-1/2 flex flex-col gap-4">
        <div class="alpha-block flex flex-auto items-center justify-between">
          <div class="p-3">
            用能碳排
          </div>
          <div class="fs-20 ml-auto p-3 line-height-none">
            {{ summary.carbonEmission ?? '-' }}
          </div>
          <div class="pr-2 opacity-8">
            {{ unit }}
          </div>
        </div>
        <div class="alpha-block flex flex-auto items-center justify-between">
          <div class="p-3">
            绿色减排
          </div>
          <div class="fs-20 ml-auto p-3 line-height-none">
            {{ summary.emissionReduction ?? '-' }}
          </div>
          <div class="fs-14 pr-2 opacity-80">
            {{ unit }}
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4 h-70 w-full flex gap-4 px-4">
      <div class="alpha-block relative h-full w-[calc(50%-0.5rem)]">
        <PieChart :data="analyseList" />
        <div class="fs-14 absolute right-12px top-1/2 w-1/2 -translate-y-1/2">
          <ElTable :data="pieList" size="small" border height="230px">
            <ElTableColumn label="排放源" prop="a" />
            <ElTableColumn label="排放量" prop="b" />
            <ElTableColumn label="占比" prop="c" />
          </ElTable>
        </div>
      </div>
      <div class="alpha-block h-full w-[calc(50%-0.5rem)]">
        <BarChart :data="facilityActivityList" />
      </div>
    </div>
    <div class="mt-4 h-150 flex-auto overflow-auto px-4">
      <div class="alpha-block h-full w-full">
        <SankeyChart :data="diversionDiagramList" />
      </div>
    </div>
  </div>
</template>
